
<template>
    <div id="container" class="editor" />
</template>

<script>
import { generator, savepreviewfile } from '@/api/generator/generator'

const options = {
  selectOnLineNumbers: true,
  lineWrapping: true, // 代码折叠
  foldGutter: true,
  gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
  matchBrackets: true, // 括号匹配
  roundedSelection: false,
  // readOnly: this.readOnly, // 只读
  cursorStyle: 'line', // 光标样式
  automaticLayout: true, // 自动布局
  glyphMargin: true, // 字形边缘
  useTabStops: false,
  fontSize: 28, // 字体大小
  autoIndent: true // 自动布局
}

import * as monaco from 'monaco-editor'
export default {
  data() {
    return {
      editor: null // 文本编辑器
    }
  },
  mounted() {
    this.initEditor()
  },
  methods: {
    initEditor() {
      // 初始化编辑器，渲染DOM
      this.editor = monaco.editor.create(document.getElementById('container'), {
        value: '', // 编辑器初始显示文字 也是编辑器的绑定值
        language: 'sql', // 支持的语言
        automaticLayout: true, // 是否开启自动布局
        theme: 'vs-dark' // 官方自带三种主题vs 白色, hc-black 黑色, or vs-dark 非常黑
      })
    },
    getValue() {
      this.editor.getValue() // 获取编辑器中的文本
    }
  }
}
</script>
<style>
.editor {
    width: 600px;
    height: 800px;
}
</style>
